<template>
    <div class="container">
        <div class="container-form">
            <el-form
                :model="inputForm"
                ref="inputForm"
                @keyup.enter="doSubmit()"
                label-width="200px"
                v-loading="loading"
                @submit.prevent
            >
			<el-divider content-position="left"
				><el-icon> <lock /></el-icon> 登录信息</el-divider
			>
				<el-col :span="18">
					<el-form-item
						label="账号"
						prop="loginName"
						:rules="[
							{
								required: true,
								message: '登录名不能为空',
								trigger: 'blur',
							},
						]"
					>
						<el-input
							v-model="inputForm.loginName"
							maxlength="50"
							placeholder=""
						></el-input>
					</el-form-item>
				</el-col>
			
				<el-divider content-position="left"
				><el-icon> <user /></el-icon>工会信息</el-divider
			>
				<el-col :span="18">
					<el-form-item
						prop="companyId"
						:rules="[
							{
								required: true,
								message: '学校不能为空',
								trigger: 'blur',
							},
						]"
						label="学校"
					>
						<el-tree-select
							ref="companyTree"
							value-key="id"
							:props="{
								label: 'name', // 显示名称
								children: 'children', // 子级字段名
							}"
							@change="handleChangeCompany"
							:data="companyTreeData"
							v-model="inputForm.companyId"
							check-strictly
							style="width: 100%"
							:clearable="true"
							:accordion="true"
						>
							<template #default="{ node, data }">
								<span
									class="custom-tree-node el-tree-node__label"
								>
									<span class="label">
										<el-icon class="m-r-5">
											<qiye
												v-if="data.type === '1'"
											></qiye>
											<bumen v-else></bumen>
										</el-icon>
										{{ node.label }}
									</span>
								</span>
							</template>
						</el-tree-select>
					</el-form-item>
				</el-col>
				<el-col :span="18">
					<el-form-item
						prop="officeId"
						:rules="[
							{
								required: true,
								message: '工会不能为空',
								trigger: 'blur',
							},
						]"
						label="工会"
					>
						<el-tree-select
							ref="officeTree"
							value-key="id"
							:props="{
								label: 'name', // 显示名称
								children: 'children', // 子级字段名
							}"
							:data="officeTreeData"
							v-model="inputForm.officeId"
							check-strictly
							style="width: 100%"
							:clearable="true"
							:accordion="true"
						>
							<template #default="{ node, data }">
								<span
									class="custom-tree-node el-tree-node__label"
								>
									<span class="label">
										<el-icon class="m-r-5">
											<qiye
												v-if="data.type === '1'"
											></qiye>
											<bumen v-else></bumen>
										</el-icon>
										{{ node.label }}
									</span>
								</span>
							</template>
						</el-tree-select>
					</el-form-item>
				</el-col>
				<el-divider content-position="left"
				><el-icon> <postcard /></el-icon> 职位信息</el-divider
			>
				<el-col :span="18">
					<el-form-item label="岗位" prop="postId" >
						<el-select
							v-model="inputForm.postId"
							style="width: 100%"
							
							placeholder="请选择"
						>
							<el-option
								v-for="item in postList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="18">
					<el-form-item
						label="职位"
						prop="roleId"
						:rules="[
							{
								required: true,
								message: '职位不能为空',
								trigger: 'blur',
							},
						]"
					>
						<el-select
							v-model="inputForm.roleId"
							style="width: 100%"
							
							placeholder="请选择"
						>
							<el-option
								v-for="role in roleList"
								:key="role.id"
								:label="role.name"
								:value="role.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="18">
					<el-form-item label="备注" prop="remarks">
						<el-input
							type="textarea"
							v-model="inputForm.remarks"
							maxlength="200"
							placeholder=""
						></el-input>
					</el-form-item>
				</el-col>
		    </el-form>
        </div>

		<!-- <template #footer>
      <span class="dialog-footer">
        <el-button  @click="visible = false" icon="circle-close">关闭</el-button>
        <el-button  type="primary" v-if="method != 'view'" @click="doSubmit()" icon="circle-check" v-noMoreClick>确定</el-button>
      </span>
     </template> -->
		<div class="container-button">
			<span class="dialog-footer">
				<el-button
					type="primary"
					@click="doSubmit()"
					icon="circle-check"
					>确定</el-button
				>
			</span>
        </div>
	</div>
</template>

<script>
import associationApply from "@/api/apply/associationApply.js";
import postService from "@/api/sys/postService";
import roleService from "@/api/sys/roleService";
import officeService from "@/api/sys/officeService";
export default {
	data() {
		return {
			loading: false,
			roleList: [],
			postList: [],
			companyTreeData: [],
			officeTreeData: [],
			inputForm: {
				id: "",
				companyId:"",
				officeId: "",
				roleId: "",
				postId: "",
				loginName: "", // 登录名
				name:"",
				remarks: "", // 备注
				currentLoginName:"",
			},
		};
	},
    mounted(){
        this.init();
    },
	computed: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
	},
	methods: {
		init() {
			this.$nextTick(() => {
				// if (this.$refs.inputForm !== undefined) {
				// 	this.$refs.inputForm.resetFields();
				// }
				Promise.all([
					roleService.list({ current: 1, size: -1 }),
					postService.list({ current: 1, size: -1 }),
					officeService.treeData({ type: 1 }),
				]).then((result) => {
					this.roleList = result[0].records;
					this.postList = result[1].records;
					this.companyTreeData = result[2];
				});
				// this.inputForm.oldLoinName = "";
			});
		},
		handleChangeCompany(companyId) {
			officeService
				.treeData({ type: 2, parentId: companyId })
				.then((data) => {
					this.officeTreeData = data;
				});
		},
		// 表单提交
		doSubmit() {
			this.$refs["inputForm"].validate((valid) => {
				this.inputForm.currentLoginName=this.currentUser.loginName
				this.inputForm.name=this.currentUser.name
				if (valid) {
					this.loading = true;
                    associationApply.apply(this.inputForm)
                    .then((data)=>{
                        this.loading = false;
                        this.$message.success(data);
                        this.$emit("refreshDataList");
                    })
                    .catch(() => {
                        this.loading = false;
                    });
				}
			});
		},
	},
};
</script>
<style scoped>
.avatar {
	height: 100px;
}
.el-divider__text {
	font-weight: bold;
	font-size: 16px;
}
.container{
    background-color: #fff;
    margin: 15px;
	height: calc(100% - 140px);
}
@media screen and (max-width: 992px) {
	.container{
		height: calc(100% - 30px);
	}
}
.container-form{
    padding: 40px;
}
.container-button{
    padding: 40px;
    display: flex;
    justify-content: end;
}

</style>
